/**
 * ==================================================
 * vue-router transition
 * ==================================================
 */
 .vux-pop-out-transition,
.vux-pop-in-transition {
  width: 100%;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  backface-visibility: hidden;
}
.vux-pop-out-enter,
.vux-pop-out-leave,
.vux-pop-in-enter,
.vux-pop-in-leave {
  will-change: transform;
  height: 100%;
  position: absolute;
  left: 0;
}
.vux-pop-out-enter {
  animation-name: popInLeft;
}
.vux-pop-out-leave {
  animation-name: popOutRight;
}
.vux-pop-in-enter {
  perspective: 1000;
  animation-name: popInRight;
}
.vux-pop-in-leave {
  animation-name: popOutLeft;
}

@keyframes popInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    -webkit-transform:translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes popInLeft{
  from {
    transform: translate3d(-100%, 0, 0);
    -webkit-transform:translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@keyframes popOutLeft {
  from {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes popOutLeft {
  from {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
  }
}
@keyframes popInRight {
  from {
    transform: translate3d(100%, 0, 0);
    -webkit-transform:translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    -webkit-transform:translate3d(0, 0, 0);
  }
}
@-webkit-keyframes popInRight {
  from {
    transform: translate3d(100%, 0, 0);
    -webkit-transform:translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    -webkit-transform:translate3d(0, 0, 0);
  }
}
@keyframes popOutRight {
  from {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
  }
}
@-webkit-keyframes popOutRight {
  from {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

// REM 适配 <html>
$designWidth:375;
// 375px (iPhone 6)
// 此为基准值, 与视觉设计稿 `宽度/2` 保持一致
html {
  font-size: 20PX;
}

// 17.06667 = 320*20/375 (iPhone 5)
// 此处 hack 写法，使用 19px 代替 17px，兼容过小(<10px)的中文字体使用
@media only screen and (min-width: 319px) {
  html {
    font-size: #{20*320PX/$designWidth} !important;
  }
}

// 19.2 = 360*20/375 (Most Android)

@media only screen and (min-width: 359px) {
  html {
    font-size: #{20*360PX/$designWidth} !important;
  }
}

// base root size (iPhone 6)
@media only screen and (min-width: 374px) {
  html {
    font-size: #{20*375PX/$designWidth} !important;
  }
}

// 21.3333 = 400*20/375 (Most Android)
@media only screen and (min-width: 399px) {
  html {
    font-size: #{20*400PX/$designWidth} !important;
  }
}


// 22.08 = 414*20/375 (iPhone 6 Plus)
@media only screen and (min-width: 413px) {
  html {
    font-size: #{20*414PX/$designWidth} !important;
  }
}

// 25.6 = 480*20/375 (iPad)
@media only screen and (min-width: 439px) {
  html {
    font-size: #{20*480PX/$designWidth} !important;
  }
}

// 40.906666666666666 = 768*20/375 (iPad2)
@media only screen and (min-width: 767px) {
  html {
    font-size: #{20*767PX/$designWidth} !important;
  }
}

// REM 适配 <html data-rem="320">

// 320px (iPhone 5)
// 此为基准值, 与视觉设计稿 `宽度/2` 保持一致
html[data-rem="320"] {
  font-size: 20px;
}

// 23.4375 = 375*20/320 (Most Android)
@media only screen and (min-width: 375px) {
  html[data-rem="320"] {
    font-size: 23.4375px !important;
  }
}

// 25 = 400*20/320 (Most Android)
@media only screen and (min-width: 400px) {
  html[data-rem="320"] {
    font-size: 25px !important;
  }
}

// 25.875 = 414*20/320 (iPhone 6 Plus)
@media only screen and (min-width: 414px) {
  html[data-rem="320"] {
    font-size: 25.875px !important;
  }
}

// 30 = 30 (iPad)
@media only screen and (min-width: 480px) {
  html[data-rem="320"] {
    font-size: 30px !important;
  }
}
